<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script src="../assets/flexible/flexible.debug.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/secone.css">
    <link rel="stylesheet" href="../assets/animate/animate.css">
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">

    <body>
        <header class="header">
            <div class="left index">康爱多</div>
            <div class="center">签到中心</div>
            <div class="right dian">...</div>
        </header>
        <div class="banner">
            <img src="../images/37.png">
        </div>
        <section class="section">
            <ul>
                <li class="lis on">正在疯抢</li>
                <li class="lis">即将开始</li>
            </ul>
        </section>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide clearfix">
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/27/52/CgAgEVcMb8qAaglUAAHZ-_Pwiek401.jpg_180x180.jpg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/0E/2D/CgAgEFZW-i2AXsY-AAAgALno4E460.jpeg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/27/52/CgAgEVcMb8qAaglUAAHZ-_Pwiek401.jpg_180x180.jpg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/0E/2D/CgAgEFZW-i2AXsY-AAAgALno4E460.jpeg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/27/52/CgAgEVcMb8qAaglUAAHZ-_Pwiek401.jpg_180x180.jpg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide clearfix">
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/27/52/CgAgEVcMb8qAaglUAAHZ-_Pwiek401.jpg_180x180.jpg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/0E/2D/CgAgEFZW-i2AXsY-AAAgALno4E460.jpeg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/27/52/CgAgEVcMb8qAaglUAAHZ-_Pwiek401.jpg_180x180.jpg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/0E/2D/CgAgEFZW-i2AXsY-AAAgALno4E460.jpeg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                    <div class="main">
                        <div class="left">
                            <img src="http://image.360kad.com/group1/M00/27/52/CgAgEVcMb8qAaglUAAHZ-_Pwiek401.jpg_180x180.jpg">
                        </div>
                        <div class="right">
                            <p class="p1">聚成优品蒸馏水</p>
                            <p class="p2">￥8.8</p>
                            <p class="p3">￥25.9</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="guide">
            <ul>
                <li class="iconfont">&#xe63a;<span>搜索</span></li>
                <li class="iconfont">&#xe6a9;<span>首页</span></li>
                <li class="iconfont">&#xe507;<span>消息</span></li>
            </ul>
        </div>
        <script src="../assets/jquery/jquery-3.2.1.min.js"></script>
        <script src="../assets/swiper/js/swiper.jquery.min.js"></script>
        <script>
            var mySwiper = new Swiper('.swiper-container', {
                onTransitionEnd: function (swiper) {
                    $('.lis').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
                }
            })

            $('.lis').click(function () {
                $(this).addClass('on').siblings().removeClass('on');
                mySwiper.slideTo($(this).index(), 1000);
            });
            $(".dian").click(function () {
                $(".guide").slideToggle();
            })
            $(".index").click(function () {
                location.href = "../index.html"
            })
        </script>
    </body>
</head>